<template>
	<view class="container">
		<!--  搜索组件 -->
		<view class='bg-sear'>
			<view class="scrolltop">
				<view class='section' @click='toSearchPage()'>
					<image src='../../static/icon/search.png' lazy-load class='search-img'></image>
					<text class='placeholder'>搜索</text>
				</view>
			</view>
		</view>
		<view class='content'>
			<!-- swiper -->
			<swiper :autoplay="autoplay" :indicator-color="indicatorColor" :interval="interval" :duration="duration"
				:indicator-active-color="indicatorActiveColor" circular="true" class='pic-swiper' indicator-dots
				previous-margin='20rpx' next-margin='20rpx'>
				<block v-for='item in indexImgs' :key='item.imgUrl'>
					<swiper-item class="banner-item">
						<view class='img-box'>
							<image :src='item.imgUrl' :data-prodid='item.relation' @click='toProdPage' class='banner' lazy-load>
							</image>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<!-- 分类导航  -->
			<view class='cat-item'>
				<view class='item' @click='toClassifyPage($event)' data-sts="1">
					<image src='../../static/icon/newProd.png' lazy-load> </image>
					<text>新品推荐</text>
				</view>
				<view class='item' @click='toClassifyPage($event)' data-sts="2">
					<image src='../../static/icon/timePrice.png' lazy-load></image>
					<text>限时特惠</text>
				</view>
				<view class='item' @click='toClassifyPage($event)' data-sts="3">
					<image src='../../static/icon/neweveryday.png' lazy-load></image>
					<text>每日疯抢</text>
				</view>
				<!--
			      <view class='item' bindtap='toCouponCenter'>
			        <image src='../../images/icon/newprods.png'></image>
			        <text>领优惠券</text>
			      </view>
			      -->
			</view>
			<!-- 消息播放 -->
			<view class='message-play' @click='onNewsPage'>
				<image src='../../static/icon/horn.png' lazy-load class='hornpng'></image>
				<swiper vertical='true' :autoplay='true' duration='1000' class='swiper-cont'>
					<block v-for='item in news' :key='item.id'>
						<swiper-item class="items">{{ item.title }}</swiper-item>
					</block>
				</swiper>
				<text class='arrow'></text>
			</view>
		</view>
		<block v-for="item in taglist" :key="item.id">
			<!-- 每日上新 -->
			<view class='up-to-date' v-if="item.style == 2">
				<view class='title'>
					<text>{{ item.title }}</text>
					<view class='more-prod-cont' @click='toClassifyPage' data-sts="0" :data-id="item.id" :data-title="item.title">
						<text class='more'>查看更多</text>
						<!-- <text class='arrow'></text> -->
					</view>
				</view>
				<view class='item-cont'>
					<block v-for="prod in item.prods" :key="prod.prodId">
						<view class='prod-item' @click='toProdPage($event)' :data-prodid="prod.prodId">
							<view>
								<view class='imagecont'>
									<image @error="handleError" :lazy-load="true" :src="prod.pic" class='prodimg'>
									</image>
								</view>
								<view class='prod-text'>{{ prod.prodName }}</view>
								<view class='price'>
									<text class='symbol'>￥</text>
									<text class='big-num'>{{ parsePrice(prod.price)[0] }}</text>
									<text class='small-num'>.{{ parsePrice(prod.price)[1] }}</text>
								</view>
							</view>
						</view>
					</block>

				</view>
			</view>

			<!-- 商城热卖 -->
			<view class='hot-sale' v-if="item.style == 1">
				<view class='title'>
					<text>{{ item.title }}</text>
					<view class='more-prod-cont' @click='toClassifyPage($event)' data-sts="0" :data-id="item.id"
						:data-title="item.title">
						<text class='more'>更多</text>
						<text class='arrow'></text>
					</view>
				</view>
				<view class='hotsale-item-cont'>
					<block v-for="prod in item.prods" :key="prod.prodId">
						<view class='prod-items' @click='toProdPage($event)' :data-prodid="prod.prodId">
							<view class='hot-imagecont'>
								<image :src='prod.pic' class='hotsaleimg'></image>
							</view>
							<view class='hot-text'>
								<view class='hotprod-text'>{{ prod.prodName }}</view>
								<view class='prod-info'>{{ prod.brief }}</view>
								<view class='prod-text-info'>
									<view class='price'>
										<text class='symbol'>￥</text>
										<text class='big-num'>{{ parsePrice(prod.price)[0] }}</text>
										<text class='small-num'>.{{ parsePrice(prod.price)[1] }}</text>
									</view>
									<!-- <view class='singal-price'>
		                  <text>￥</text>
		                  <text>{{prod.oriPrice}}</text>
		                </view> -->
									<image src='../../static/tabbar/basket-sel.png' lazy-load class='basket-img'></image>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>

			<!-- 更多宝贝 -->
			<view class='more-prod' v-if="item.style == 0">
				<view class='title'>{{ item.title }}</view>
				<view class='prod-show'>
					<block v-for="prod in item.prods" :key="prod.prodId">
						<view class='show-item' @click='toProdPage($event)' :data-prodid="prod.prodId">
							<view class='more-prod-pic'>
								<image :src='prod.pic' class='more-pic' lazy-load></image>
							</view>
							<view class='prod-text-right'>
								<view class='prod-text more'>{{ prod.prodName }}</view>
								<view class='prod-info'>{{ prod.brief }}</view>
								<view class='b-cart'>
									<view class='price'>
										<text class='symbol'>￥</text>
										<text class='big-num'>{{ parsePrice(prod.price)[0] }}</text>
										<text class='small-num'>.{{ parsePrice(prod.price)[1] }}</text>
									</view>
									<!-- <view class='go-to-buy'>立即购买</view> -->
									<image lazy-load src='../../static/tabbar/basket-sel.png' class='basket-img'></image>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
import { parsePrice } from '../../wxs/numbers.js'
import { getCartCount, request } from '../../utils/http.js'
export default {
	data() {
		return {
			indicatorDots: true,
			indicatorColor: '#d1e5fb',
			indicatorActiveColor: '#1b7dec',
			autoplay: true,
			interval: 2000,
			duration: 1000,
			indexImgs: [],
			seq: 0,
			news: [],
			taglist: [],
			sts: 0,
		}
	},
	onLoad() {
		this.getAllData();
	},
	methods: {
		parsePrice: parsePrice,
		getAllData() {
			getCartCount(); //重新计算购物车总数量
			this.getIndexImgs();
			this.getNoticeList();
			this.getTag();
		},
		getIndexImgs() {
			//加载轮播图
			var params = {
				url: "/indexImgs",
				method: "GET",
				data: {},
				callBack: (res) => {
					this.indexImgs = res,
						this.seq = res
				}
			};
			request(params);
		},
		getNoticeList() {
			// 加载公告
			var params = {
				url: "/shop/notice/topNoticeList",
				method: "GET",
				data: {},
				callBack: (res) => {
					this.news = res
				}
			};
			request(params);
		},
		getTag() {
			// 加载商品标题分组列表
			var params = {
				url: "/prod/tag/prodTagList",
				method: "GET",
				data: {},
				callBack: (res) => {
					this.taglist = res;
					for (var i = 0; i < res.length; i++) {
						this.getTagProd(res[i].id, i);
					}
				}
			};
			request(params);
		},
		getTagProd(id, index) {
			var param = {
				url: "/prod/prodListByTagId",
				method: "GET",
				data: {
					tagId: id,
					size: 6
				},
				callBack: (res) => {
					var taglist = JSON.parse(JSON.stringify(this.taglist));
					taglist[index].prods = res.records;

					this.taglist = taglist;

				}
			};
			request(param);
		},
		//事件处理函数
		bindViewTap: function () {
			uni.navigateTo({
				url: '../logs/logs'
			})
		},
		toSearchPage() {
			uni.navigateTo({
				url: '/pages/search-page/search-page',
			})
		},
		toClassifyPage(e) {
			var url = '/pages/prod-classify/prod-classify?sts=' + e.currentTarget.dataset.sts;
			var id = e.currentTarget.dataset.id;
			var title = e.currentTarget.dataset.title;
			if (id) {
				url += "&tagid=" + id + "&title=" + title;
			}
			///pages/prod-classify/prod-classify
			uni.navigateTo({
				url: url
			})
		},
		onNewsPage() {
			uni.navigateTo({
				url: '/pages/recent-news/recent-news',
			})
		},
		toProdPage(e) {
			var prodid = e.currentTarget.dataset.prodid;
			if (prodid) {
				uni.navigateTo({
					url: '/pages/prod/prod?prodid=' + prodid,
				})
			}
		},
		onPullDownRefresh: function () {

			// wx.showNavigationBarLoading() //在标题栏中显示加载

			//模拟加载
			var ths = this;
			setTimeout(function () {

				ths.getAllData();

				// wx.hideNavigationBarLoading() //完成停止加载

				uni.stopPullDownRefresh() //停止下拉刷新

			}, 100);

		},
		handleError(event) {
			console.log("error image");
			console.log(event);
			event.detail = { errMsg: 'something wrong' }
		}
	}
}
</script>

<style>
/**index.wxss**/

page {
	background: #f7f7f7;
	height: auto;
}

/* 轮播图及搜索框 */

swiper {
	width: 100%;
	height: 350rpx;
	overflow: hidden;
}

swiper.pic-swiper {
	margin-top: 75rpx;
	padding: 10rpx 0;
	background: #fff;
	height: 422rpx;
}

swiper-item {
	font-size: 26rpx;
	font-weight: bold;
}

swiper.pic-swiper .img-box {
	font-size: 0;
}

.wx-swiper-dots {
	margin-bottom: 15rpx;
}

.banner-item {
	box-sizing: border-box;
}

swiper.pic-swiper .banner {
	position: absolute;
	width: 690rpx;
	margin: 0 10rpx;
	height: 402rpx;
	border-radius: 8rpx;
	display: inline-block;
	box-shadow: 0 4px 10px 0 rgba(83, 83, 83, 0.288);
}

.container .bg-sear {
	position: fixed;
	z-index: 999;
	width: 100%;
	line-height: 56rpx;
	background: #fff;
	padding-bottom: 20rpx;
	text-align: center;
	top: 0;
}

.bg-sear .section {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60rpx;
	background: #fff;
	z-index: 1;
	border-radius: 50rpx;
	width: 92%;
	margin: auto;
	left: 4%;
	background: #f7f7f7;
}

.bg-sear .section .placeholder {
	display: block;
	font-size: 24rpx;
	color: #999;
}

.bg-sear .section .search-img {
	width: 32rpx;
	height: 32rpx;
	margin-right: 10rpx;
}

/* 分类栏目 */

.content {
	background: #fff;
}

.cat-item {
	display: flex;
	justify-content: space-between;
	background: #fff;
	padding-top: 20rpx;
	padding-bottom: 30rpx;
}

.cat-item .item {
	text-align: center;
	width: 25%;
	display: flex;
	flex-direction: column;
	margin: auto;
	align-items: center;
}

.cat-item .item image {
	width: 75rpx;
	height: 75rpx;
}

.cat-item .item text {
	font-size: 26rpx;
	margin-top: 20rpx;
}

/* 消息播放 */

.message-play {
	position: relative;
	height: 90rpx;
	background: #fff;
	margin: auto;
	padding: 0 60rpx 0 100rpx;
	box-sizing: border-box;
	box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
	border: 2rpx solid #fafafa;
}

.message-play .hornpng {
	width: 77rpx;
	height: 36rpx;
	position: absolute;
	left: 20rpx;
	top: 27rpx;
	margin-right: 8rpx;
}

.message-play .swiper-cont {
	height: 90rpx;
	line-height: 90rpx;
}

.message-play .swiper-cont .items {
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-align: left;
}

.arrow {
	width: 15rpx;
	height: 15rpx;
	border-top: 3rpx solid #686868;
	border-right: 3rpx solid #686868;
	transform: rotate(45deg);
	position: absolute;
	right: 30rpx;
	top: 34rpx;
}

/* 每日上新 */

.title {
	position: relative;
	height: 64rpx;
	line-height: 64rpx;
	font-size: 32rpx;
	padding: 40rpx 0 10rpx 30rpx;
	color: #333;
	background: #fff;
}

.up-to-date .title {
	color: #fff;
	background: none;
}

.title .more-prod-cont {
	color: #999;
	display: inline-block;
	text-align: right;
}

.up-to-date .title .more-prod-cont .more {
	position: absolute;
	right: 30rpx;
	top: 48rpx;
	color: #fff;
	font-size: 24rpx;
	background: #65addf;
	border-radius: 30rpx;
	padding: 0 30rpx;
	height: 44rpx;
	line-height: 44rpx;

}

.title .more-prod-cont .more {
	position: absolute;
	right: 30rpx;
	top: 48rpx;
	color: #666;
	font-size: 24rpx;
	padding: 0 20rpx;
	height: 44rpx;
	line-height: 44rpx;
}

.title .more-prod-cont .arrow {
	top: 58rpx;
	right: 30rpx;
	border-top: 2rpx solid #666;
	border-right: 2rpx solid #666;
}

.up-to-date {
	background-image: url("");
	background-position: top;
	background-size: 100% 332rpx;
	background-repeat: no-repeat;
	background-color: #fff;
}

.up-to-date .item-cont {
	margin: auto;
	height: auto;
	width: calc(100% - 40rpx);
	padding: 0 20rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	/* padding: 10rpx 0 0 0; */
}

.hotsale-item-cont {
	padding-bottom: 20rpx;
	background: #fff;
}

.up-to-date .item-cont::before {
	clear: both;
	height: 0;
	overflow: hidden;
}

.up-to-date .item-cont .prod-item {
	border-radius: 10rpx;
	width: 220rpx;
	background: #fff;
	display: inline-block;
	margin-bottom: 20rpx;
	box-shadow: 0rpx 6rpx 8rpx rgba(58, 134, 185, 0.2);
}

.up-to-date .item-cont .prod-item .imagecont {
	width: 100%;
	font-size: 0;
}

.up-to-date .item-cont .prod-item .imagecont .prodimg {
	width: 220rpx;
	height: 220rpx;
	vertical-align: middle;
	border-top-left-radius: 10rpx;
	border-top-right-radius: 10rpx;
	font-size: 0;

}

.up-to-date .item-cont .prod-item .prod-text {
	font-size: 28rpx;
	overflow: hidden;
	margin: 10rpx 0;
	height: 68rpx;
	display: -webkit-box;
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: #000;
	padding: 0 10rpx;
}

.up-to-date .item-cont .prod-item .prod-price {
	font-size: 25rpx;
	color: #eb2444;
	font-family: Arial;
	padding: 0 10rpx;
}

.more.prod-price {
	position: absolute;
	bottom: 20rpx;
}

.hot-sale .prod-items {
	width: 345rpx;
	display: inline-block;
	background: #fff;
	padding-bottom: 20rpx;
	box-sizing: border-box;
	/* border: 2rpx solid #e1e1e1; */
	box-shadow: 0rpx 6rpx 8rpx rgba(58, 134, 185, 0.2);
}

.hot-sale .prod-items:nth-child(2n-1) {
	margin: 20rpx 10rpx 10rpx 20rpx;
}

.hot-sale .prod-items:nth-child(2n) {
	margin: 20rpx 20rpx 10rpx 10rpx;
}

.prod-items .hot-imagecont .hotsaleimg {
	width: 341rpx;
	height: 341rpx;
}

.prod-items .hot-text .hotprod-text {
	font-size: 28rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.prod-items .hot-imagecont {
	font-size: 0;
	text-align: center;
}

.prod-items .hot-text {
	margin-top: 20rpx;
	padding: 0 10rpx;
}

.prod-items .hot-text .prod-info,
.more-prod .prod-text-right .prod-info {
	font-size: 22rpx;
	color: #999;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.prod-items .hot-text .prod-text-info {
	position: relative;
	height: 70rpx;
	line-height: 70rpx;
	font-family: Arial;
}

.prod-items .hot-text .prod-text-info .hotprod-price {
	display: inline;
	font-size: 26rpx;
	color: #eb2444;
}

.prod-items .hot-text .prod-text-info .basket-img {
	width: 50rpx;
	height: 50rpx;
	position: absolute;
	right: 0;
	bottom: 7rpx;
	/* border: 2rpx solid #eb2444;
	  border-radius: 50%; */
	padding: 8rpx;
}

.singal-price {
	display: inline;
	font-size: 20rpx;
	text-decoration: line-through;
	color: #777;
	margin-left: 15rpx;
}

/* 更多宝贝 */

.more-prod {
	background: #fff;
}


.more-prod .prod-show .show-item .more-prod-pic {
	width: 250rpx;
	height: 250rpx;
}

.more-prod .prod-show .show-item {
	position: relative;
	display: flex;
	padding: 20rpx;
	justify-content: flex-start;
	border-top: 2rpx solid #f4f4f4;
}

.more-prod .prod-show .show-item .more-prod-pic .more-pic {
	max-width: 100%;
	max-height: 100%;
}

.more-prod .prod-show .show-item .prod-text-right {
	margin-left: 30rpx;
	width: 72%;
	padding-bottom: 10rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.more-prod .prod-show .show-item .prod-text-right .go-to-buy {
	font-size: 26rpx;
	background: #fff2f5;
	color: #eb2444;
	border-radius: 50rpx;
	text-align: center;
	padding: 12rpx 20rpx;
	position: absolute;
	right: 20rpx;
	bottom: 20rpx;
}

.more-prod .prod-show .show-item .prod-text-right .prod-text.more {
	margin: 0;
	font-size: 28rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	display: -webkit-box;
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.more-prod .prod-show .show-item .prod-text-right .more.prod-price {
	font-size: 28rpx;
	font-family: arial;
}

.b-cart {
	margin-top: 30rpx;
}

.b-cart .basket-img {
	width: 50rpx;
	height: 50rpx;
	position: absolute;
	right: 46rpx;
	/* border: 2rpx solid #eb2444;
	  border-radius: 50%; */
	padding: 8rpx;
}
</style>
